<template>
  <div class="container">
      <div class="modal">
         
          <p>是否删除</p>
          <div class="p">
                 <button @click="handleDelete">取消</button>
                 <button @click="handleCancel">删除</button>
          </div>
         
      </div>
  </div>
</template>

<script>
export default {
    methods:{
        handleDelete(){
            this.$emit("del")
        },
        handleCancel(){
            this.$emit('cel')
        }
        
        
    }
};
</script>

<style  scoped>
.container{
    width:100%;
    height: 300px;
    position: absolute;
    top:200px;
    background: rgba(51, 51, 51, 1);
}
.bg{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:300px;
    height: 200px;
    border:1px solid #333;
    border-radius: 10px;
    text-align: center;
    background: #fff;
}
.p{
    display:flex;
    justify-content: space-around;
    margin-top: 50px;

}
p{
    color:#fff;
    text-align: center;
}
</style>